<template>
  <div id="parent" class="parent" style="position: absolute; top: 60px; left: -70px">
    <div id="child1" class="child">
      <pre>
            城东村按照“舌尖城东、乐活乡村”的发展规划，
            坚持发展休闲旅游业及现代农业的方向，以“产
            村相融，农旅结合”为抓手，配合城东村的核心
            企业四季东城观光农业产业园、孝楠农业科技
            有限责任公司、芝樱花公园、悠然咖啡、果果
            农场和20多家农家乐等乡村旅游元素，创新“农
            业生产+农产品加工+乡村旅游”开发模式，融合
            农业产业、农耕文化、山水自然、生态旅游等
            资源，种植葡萄、草莓、蓝莓、樱桃、桑葚等
            名优水果和繁育郁金香、樱花、芝樱、玫瑰等
            花卉，发展观光设施农业、加工业和旅游业；
            构建集精品水果、民俗文化、农耕文化、自然
            亲子教育、生态餐饮、花卉观赏、农产品初加
            工等多个产业同频共振的城郊型现代生态农业
            主题园区；满足人们亲近自然、与自然和谐相
            处的愿望，是川西地区富有特色的近郊乡村休闲
            农业主题公园。先后被纳入什邡市城乡统筹建设
            示范村，新村建设示范点，多次被新华网、四川
            日报、德阳日报等媒体正面报道。
          </pre
      >
    </div>
    <div id="child2" class="child"></div>
  </div>
</template>

<style>
.parent {
  width: 360px;
  height: 200px;
  overflow-y: scroll;
  color: #ffffff;
  position: absolute;
  top: 180px;
  left: -60px;
  font-family: 微软雅黑;
  font-size: 15.5px;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
.parent::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

/*设置的子盒子高度大于父盒子，产生溢出效果*/
.child {
  height: auto;
}
</style>

<script>
export default {
  mounted() {
    {
      var parent = document.getElementById("parent");
      var child1 = document.getElementById("child1");
      var child2 = document.getElementById("child2");
      child2.innerHTML = child1.innerHTML;
      setInterval(function () {
        if (parent.scrollTop >= child1.scrollHeight) {
          parent.scrollTop = 0;
        } else {
          parent.scrollTop++;
        }
      }, 20);
    }
  },
};
</script>
